<template>    
   <div class="shopcar-container" >
      <van-swipe-cell v-for="(item,index) in cartList" :key="item.id" :car="item" >
          <div class="shopcart-box">
             <van-checkbox
                @click="checkedCell(index)"
                v-model="item.isChecked"
                checked-color="#F63515"
                class="checked"
                ></van-checkbox>
              <div class="cell"  @click="goDetail($event,item.productId)">
                  <!-- {{item.name}} -->
                <img :src="item.imageHost+item.mainImage">
                <div class="shopcart-item-info">
                    <p class="shopcart-name">{{item.name}}</p>
                    <p class="shopcart-subtitle">{{item.subtitle}}</p>
                    <div class="shopcart-stepper">
                        <span class="shopcart-price">￥{{item.price}}</span>
                        <van-stepper v-model="item.count" min="1" @minus="setCount(index,-1)" @plus="setCount(index,1)" />
                    </div>
                </div>
              </div>
          </div>
          <template slot="right">
              <van-button type="danger" text="删除"  @click="onClose(item.id)" style="width:55px"/>
          </template>
      </van-swipe-cell>
   </div>
</template>
<script> 
import { delCar,submitToCar} from '@/http/index';
export default {
    props:{
        cartList:{
            type:Array
        }
       
    },
    data() {
        return {
            checked: false,
            value: 1,
        }
    },
    methods:{
        //监听左滑事件，执行删除操作
        onClose(id) {
            //展示消息确认弹窗
            this.$dialog.confirm({
                message: '确定删除吗？'
            }).then(() => {
                const params = {
                    id
                }
                // 发送删除数据请求
                delCar(params).then(res => {
                    // console.log('点击删除后：',res);
                    if (res.status == 0) {
                          //删除请求成功后删除store里面的数据
                         this.$store.commit('removeGoods',id)
                    } else {
                        this.$toast(res.msg)
                    }
                })
            });
        },
        //点击单选
        checkedCell(){
          this.$store.dispatch("changeChecked");
        },
        //跳转商品详情
        goDetail(e,id){
            if (e.target.className.indexOf("stepper") == -1) {
                 this.$router.push('/product/' + id)
            }  
        },
        //点击增加,减少
        setCount(index,sum){
                const params = {
                    productId:this.cartList[index].productId,
                    count:sum
                }
                //组装商品id和商品数量作为参数发送请求
                submitToCar(params)
        }
    },
    computed:{
    }
}
</script>
<style lang="scss" scoped>
// 公共样式
@import '../common/style/mixin';
// 单独样式
@import '../css/shopcart-box';
</style>